<template>
    <el-aside :width="isCollapse ? '64px' : '200px'" style="height: 100vh; transition: width 0.3s; overflow: hidden;">
        <el-menu router unique-opened :collapse="isCollapse" :collapse-transition="false">
            <el-sub-menu index="1">
                <template #title>
                    <el-icon>
                        <HomeFilled />
                    </el-icon>
                    <span>系统首页</span>
                </template>
                <!-- 填入路径 -->
                <el-menu-item index="/dashboard/home">
                    <span>首页</span>
                </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="2">
                <template #title>
                    <el-icon>
                        <UserFilled />
                    </el-icon>
                    <span>个人中心</span>
                </template>
                <!-- 填入路径 -->
                <el-menu-item index="/dashboard/info">
                    <span>个人信息</span>
                </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="3">
                <template #title>
                    <el-icon>
                        <Avatar />
                    </el-icon>
                    <span>教练信息</span>
                </template>
                <!-- 填入路径 -->
                <el-menu-item index="/dashboard/coach">
                    <span>全部教练</span>
                </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="4">
                <template #title>
                    <el-icon>
                        <Bicycle />
                    </el-icon>
                    <span>车辆信息</span>
                </template>
                <!-- 填入路径 -->
                <el-menu-item index="/dashboard/car">
                    <span>驾校车辆</span>
                </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="5">
                <template #title>
                    <el-icon>
                        <School />
                    </el-icon>
                    <span>驾校报名</span>
                </template>
                <!-- 填入路径 -->
                <el-menu-item index="/dashboard/home">
                    <span>全部驾校</span>
                </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="6">
                <template #title>
                    <el-icon>
                        <Shop />
                    </el-icon>
                    <span>马上学车</span>
                </template>
                <!-- 填入路径 -->
                <el-menu-item index="/dashboard/training">
                    <span>预约训练</span>
                </el-menu-item>

                <el-menu-item index="/dashboard/sing">
                    <span>签到/签退</span>
                </el-menu-item>

                <el-menu-item index="/dashboard/record">
                    <span>训练记录</span>
                </el-menu-item>

                <el-menu-item index="/dashboard/test_info">
                    <span>查看成绩</span>
                </el-menu-item>

            </el-sub-menu>

            <el-sub-menu index="7">
                <template #title>
                    <el-icon>
                        <LocationFilled />
                    </el-icon>
                    <span>考试预约</span>
                </template>
                <!-- 填入路径 -->
                <el-menu-item index="/dashboard/test">
                    <span>预约记录</span>
                </el-menu-item>
                
                  <el-menu-item index="/dashboard/test_train">
                    <span>考试预约</span>
                </el-menu-item>
            </el-sub-menu>

        </el-menu>
    </el-aside>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { UserFilled, Shop, LocationFilled, School, HomeFilled, Avatar, Bicycle } from '@element-plus/icons-vue'
import { isCollapse } from './isCollapse';
const message = ref('Hello, Vue 3!');
onMounted(() => {
    // Your code here
});

// 在组件卸载前执行的操作
onUnmounted(() => {
    // Your code here
});
</script>
<style>
.el-menu {
    border-right: none !important;
}

.el-menu--collapse {
    width: 64px !important;
}

.el-menu:not(.el-menu--collapse) {
    width: 200px !important;
}
</style>